<template>
  <div>
	
	<myheader></myheader>
	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			<div v-width="300"><AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete></div>
			<table>
				<tr v-for="(item, index) in search_list">
					<td style="padding:5px;">
						{{ index+1 }}
					</td>
					<td style="padding:5px;">
						<!-- 字符串用单引号 target 新开窗口 -->
						<a target="_blank" :href="'/item?id=' + item.id">{{ item.name }}</a>
					</td>
				</tr>
			</table>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader'
import myfooter from './myfooter'

import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '商品检索页'}],
	  word: '',
	  search_list: [],
	  // 智能提示控件
	  value: '',
      param: {
        orgId: 1, // 自定义参数传递
        loadData,
        minWord: 1
      }
    }
  },

  // 注册组件
  components: {
	  'myheader': myheader,
	  'myfooter': myfooter
  },
  
  // 监听属性
  watch: {
	$route(to, from){
		// window.location.href = '/search';
		// 刷新页面
		this.$router.go(0);
	}
  },

  mounted:function(){
	var word = this.$route.query.word;

	this.word = word;

	console.log(this.word);

	this.submit();
  },

  methods:{
	  // 关键词变更
	  onChange(data, trigger) {
    	console.log(data, trigger);
	  },
		
	  // 提交
	  submit: function () {
		  if (this.word != '') {
			// 发送请求
		  	this.axios.get('http://127.0.0.1:8000/goodssearch/',
			{params: {
			  word: this.word
			  }}).then((result) =>{
				console.log(result);
				// 赋值操作
				this.search_list = result.data;
				if(this.search_list.length == 0){
					this.$Message('对不起，暂时没有您搜索的商品')
				}
		  	})
		  } else {
			  this.$Message('请输入您想要搜索的商品');
			  return false;
		  }
		  
	  }
     
  }
}


</script>
 
<style>



</style>